<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 样式 -->
    <link rel="stylesheet" type="text/css" href="index.css">
    <!-- 脚本 -->
    <script type="text/javascript" src="../../../lib/vue.global.prod.js" defer></script>
    <script type="text/javascript" src="index.js" defer></script>
</head>

<body>
    <div id="app" v-cloak>
        <!-- 布局 -->
        <div class="layout">
            <!-- 搜索 -->
            <div class="search">
                <!-- 输入框 -->
                <input ref="input" class="input" type="text" v-model="keyword" :placeholder="t('searchPlaceholder')"
                    @input="onInputChange" @keydown.enter="onEnterBtnClick" @keydown.up="onUpBtnClick"
                    @keydown.down="onDownBtnClick" spellcheck="false" autofocus />
                <!-- 按钮 -->
                <button class="btn" v-text="t('searchBtn')" @click="onEnterBtnClick"></button>
            </div>
            <!-- 结果列表 -->
            <div class="result" v-if="items.length > 0">
                <ul class="list">
                    <li class="item" v-for="(item, index) in items" :key="index" :id="'item-' + index"
                        @click="onItemClick(item, index)" :selected="index === curIndex">
                        <div class="info">
                            <img class="icon" :src="getIcon('component')" alt="icon"></img>
                            <span class="name">{{ item.name }}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>